<template>
    <yh-dialog
        drag
        :title="`编辑访问控制(${userInfo.userCode}-${userInfo.userNickName})`"
        :visible.sync="visible"
        width="1000px"
        class="record"
        :before-close="close"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <el-form id="header-query" label-width="120px" ref="controlParams" :model="controlParams">
            <el-form-item label="锁定类型" prop="lockUserState">
                <el-checkbox-group v-model="controlParams.lockTypes">
                    <el-checkbox size="mini" key="1" label="1" @change="changeLockType('1')">
                        锁定用户<span class="red-c">（该用户在所有的IP地址都无法登录）</span>
                    </el-checkbox>
                    <el-checkbox size="mini" key="2" label="2" @change="changeLockType('2')">锁定IP地址 </el-checkbox>
                </el-checkbox-group>

                <el-select v-model="controlParams.ipType" size="mini" style="margin-left:10px;width:46%">
                    <el-option value="1" label="(黑名单)不允许以下IP地址登录"> </el-option>
                    <el-option value="2" label="(白名单)允许以下IP地址登录 "></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="IP地址列表：" prop="ipStr">
                <el-input size="mini" type="textarea" :rows="11" resize="none" v-model="controlParams.ipStr" clearable></el-input>
                <br />
                <span class="red-c">
                    *填写十进制格式的IPv4地址或者IP段，每行只写一个。IP段的起始结束IP之间用“-”隔开。
                </span>
            </el-form-item>
            <el-form-item label="锁定日期" prop="lockDate">
                <el-date-picker
                    v-model="controlParams.lockDate"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:50%"
                    size="mini"
                    value-format="yyyyMMddHHmmss"
                    format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleButton('reset')"> 重 置 </el-button>
            <el-button size="mini" @click="handleButton('cancel')"> 取 消 </el-button>
            <el-button size="mini" type="primary" @click="handleButton('confirm')">
                确 定
            </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import API from '../api/auth-manage';
import { AccessControlDTO } from '../vo/auth-manage';

@Component({ name: 'AccessControl', components: {} })
export default class AccessControl extends Vue {
    @Prop() userInfo: any;
    @Prop() dialog: boolean;
    visible: boolean = true;
    initParams: AccessControlDTO = {
        ipType: '1',
        ipList: [],
        ipStr: '',
        lockType: '2',
        lockTypes: ['2'],
        lockDate: [],
    };

    controlParams: AccessControlDTO = {
        ipType: '1',
        ipList: [],
        ipStr: '',
        lockDate: [],
        lockType: '2',
        lockTypes: ['2'],
    };
    currentType: string = ''; // 按钮操作
    // changeIp() {
    //     const data = (document.getElementsByClassName('el-textarea__inner')[0] as any)?.value;
    //     this.controlParams.ipList = data.split('\n');
    //     console.log(data, 'data');
    // }
    mounted() {
        this.visible = this.dialog;
        let accessControl = JSON.parse(JSON.stringify(this.userInfo.accessControl || {}));
        // accessControl = {
        //     lockType: '2',
        //     lockTypes: ['2'],
        //     ipType: '1',
        //     ipStr: '',
        //     ipList: ['192.168.75.14'],
        //     lockDate: ['20230802121212', '20230901121213'],
        //     beginLockTime: '20230802121212',
        //     endLockTime: '20230901121213',
        // };
        console.log(accessControl, 'accessControl');

        this.initParams = {
            lockType: accessControl.lockType,
            lockTypes: accessControl.lockType ? [accessControl.lockType] : [],
            ipType: accessControl.ipType || '',
            ipList: accessControl.ipList,
            ipStr: accessControl.ipList?.join('\n') || '',
            lockDate: [accessControl.beginLockTime || '', accessControl.endLockTime || ''] || [],
        };
        this.controlParams = JSON.parse(JSON.stringify(this.initParams));
        console.log(this.controlParams, 'controlParams');
    }

    @Watch('visible')
    handleVisible() {
        if (!this.visible) {
            this.$emit('close-custom', this.currentType);
        }
    }

    // 按钮操作
    handleButton(type: string) {
        this.currentType = type;
        if (type == 'reset') {
            // TODO
            this.controlParams = JSON.parse(JSON.stringify(this.initParams));
        } else if (type == 'cancel') {
            this.visible = false;
        } else if (type == 'confirm') {
            const data = this.controlParams.lockDate;
            let accessControl = {
                ...this.controlParams,
                ipList: this.controlParams.ipStr?.split('\n') || [],
                lockType: this.controlParams.lockTypes.join(','),
                beginLockTime: data ? this.controlParams.lockDate[0] : '',
                endLockTime: data ? this.controlParams.lockDate[1] : '',
                userCode: this.userInfo.userCode,
            };
            console.log(accessControl, 'accessControl-----');

            API.updateAccessControl({
                userCode: this.userInfo.userCode,
                serialNo: this.userInfo.serialNo,
                ...accessControl,
            }).then((res: any) => {
                this.yh_message_success('访问控制编辑成功!');
            });
            this.visible = false;
        }
    }

    close() {
        this.visible = false;
    }

    changeLockType(value) {
        console.log(this.controlParams.lockTypes, 'this.controlParams.lockTypes');

        if (this.controlParams.lockTypes.length == 2) {
            this.controlParams.lockTypes = [value];
        }
    }
}
</script>
<style lang="scss" scoped>
.red-c {
    color: red;
}
/deep/ .el-form-item .el-checkbox-group {
    display: inline-block;
}
</style>
